<template>
    <div class="person-center-container">
        <!--导航条-->
        <div class="personnal-nav-container">
            <div class="personal-nav-area">
                <!--头像和个人信息-->
                <div class="person-advator-and-info">
                    <!--头像和个人信息-->
                    <div class="person-advator-and-info">
                        <div class="demo-fit person-advator">
                            <span v-if="userBaseInfo.advator!=''">

                            <img width="150px"
                                 height="150px"
                                 v-if="userBaseInfo.advator"
                                 :src="userBaseInfo.advator"
                                 alt="头像不存在"
                                 class="avatar">
<!--                              <el-avatar
                                 style="margin: 0 auto"
                                 shape="circle"
                                 :size="150"
                                 :fit="fit"
                                 :src="userBaseInfo.advator">
                              </el-avatar>-->
                            </span>

                            <span v-else>
                              <el-avatar
                                      style="margin: 0 auto"
                                      shape="circle"
                                      :size="150"
                                      :fit="fit"
                                      src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png">
                              </el-avatar>
                            </span>

                        </div>

                        <div class="person-info">
                            <h4 style="color: #ffffff">{{userBaseInfo.name}}</h4>
                            <p class="info_font_common">
                            <span>
                                <span v-if="userBaseInfo.gender == 1">男</span>
                                <span v-else>女</span>
                            </span>
                                <span> | </span>
                                <span> {{userBaseInfo.age}}岁 </span>
                                <span> | </span>
                                <span v-if="userBaseInfo.educationId == 1">小学</span>
                                <span v-else-if="userBaseInfo.educationId == 2">初中</span>
                                <span v-else-if="userBaseInfo.educationId == 3">高中</span>
                                <span v-else-if="userBaseInfo.educationId == 4">专科</span>
                                <span v-else-if="userBaseInfo.educationId == 5">本科</span>
                                <span v-else-if="userBaseInfo.educationId == 6">211/985普本</span>
                                <span v-else-if="userBaseInfo.educationId == 7">硕士</span>
                                <span v-else-if="userBaseInfo.educationId == 8">博士</span>
                                <span v-else-if="userBaseInfo.educationId == 9">博士后</span>
                                <span> | </span>
                                <span> QQ {{userBaseInfo.qq}} </span>
                            </p>
                            <p class="info_font_common">
                                <span>手机：</span>
                                <span>{{userBaseInfo.phone}}</span>
                                <span>&nbsp;&nbsp;</span>
                                <span>微信：</span>
                                <span>{{userBaseInfo.wechat}}</span>
                            </p>
                        </div>
                    </div>
                </div>

                <div class="common-ssr-style top-common-div">
                    <p class="look-number">{{deliveryCount}}</p>
                    <p class="my-common-info">投递数量</p>
                </div>
<!--                <div class="common-ssr-style">
                    <p class="look-number">0</p>
                    <p class="my-common-info">我的浏览</p>
                </div>
                <div class="common-ssr-style">
                    <p class="look-number">0</p>
                    <p class="my-common-info">我的关注</p>
                </div>-->
            </div>
        </div>

        <!--个人中心内容区域-->
        <div class="person-center-content-area">
            <el-container style="height: 500px; border: 1px solid #eee">
                <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
                    <el-menu>
         <!--               <el-submenu index="1">
                            <template slot="title">
                              &lt;!&ndash;  <i class="el-icon-message"></i>首页&ndash;&gt;
                            </template>
                        </el-submenu>-->

                        <el-submenu index="2">
                            <template slot="title"><i class="el-icon-menu"></i>求职管理</template>
                            <el-menu-item-group>
                                <router-link to="/home/personCenter/myDeliverInfo">
                                    <el-menu-item index="2-1">我的投递</el-menu-item>
                                </router-link>

<!--                                <el-menu-item index="2-2">关注的企业</el-menu-item>-->
                            </el-menu-item-group>

                        </el-submenu>
                        <el-submenu index="3">
                            <template slot="title"><i class="el-icon-setting"></i>简历管理</template>
                            <el-menu-item-group>
                                <router-link to="/home/resumeRegister">
                                    <el-menu-item index="3-1">简历登记</el-menu-item>
                                </router-link>


                            </el-menu-item-group>
                        </el-submenu>
                    </el-menu>
                </el-aside>

                <div style="width: 100%;height: 490px;background-color: #FFF">
                    <router-view></router-view>
                </div>

            </el-container>
        </div>
    </div>
</template>

<script>
    import userBaseInfoApi from "@/api/userbaseinfosApi/userBaseInfoApi";
    import workjobApi from "@/api/workjobs/workjobApi";

    export default {
        name: "person-center",
        data(){
            const item = {
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            };
            return {
                userBaseInfo:{
                    age:'',
                    gender:1,
                    advator:'',
                    phone:'',
                    wechat:'',
                    qq:'',
                    educationId: '1',
                    educationName:''                    //用户的头像
                },
                deliveryCount:0,

                tableData: Array(10).fill(item),
                url:'https://img2.baidu.com/it/u=3640395779,265179848&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
                fit:'fill'
            }
        },
        mounted() {
            this.loadingBaseUserInfo()
            this.showDeliveryOtherInfo()
        },
        methods:{

            /*投递数量等信息*/
            showDeliveryOtherInfo(){
              const userId =  JSON.parse(localStorage.getItem('user')).userId
            workjobApi.showDeliveryOtherInfoJobHunter(userId)
                .then(data => {
                    //console.log("data data count ===>",data)
                    if (data.data.code === 0){
                        this.deliveryCount = data.data.deliveryCount
                    }
                })
                .catch(err => {
                    Promise.reject(err)
                })
            },


            /*加载用户的信息*/
            loadingBaseUserInfo(){
                this.userBaseInfo = JSON.parse(localStorage.getItem('userbaseInfo'))
                //console.log("this.userBaseInfo ===> ",this.userBaseInfo)
                userBaseInfoApi.reflectAdvator(this.userBaseInfo.userInfoId)
                    .then(data => {
                        this.userBaseInfo.advator = data.data.data
                        //console.log("data *****>>>  ",data)
                    })
                    .catch(error => {
                        Promise.reject(error)
                    })
            },
        },
        components:{
        }
    }
</script>

<style scoped>
    .person-center-content-area{
        margin-top: 10px;
    }



    /*整个个人中心内容的布局样式*/
    .person-center-container{
        /*background-color: #bfa;*/
    }

    /*个人信息栏目*/
    .personnal-nav-container{
        position: relative;
        width: 100%;
        height: 150px;
        background: #1787FB;
    }
    /*内容条区域*/
    .personal-nav-area{
        position: relative;
        width: 1360px;
        height: 150px;
        /*background: #FF7011;*/
        margin: 0 auto;
        border: 1px solid transparent;
    }
    /*头像和个人信息*/
    .person-advator-and-info{
        float: left;
        position: relative;
        width: 450px;
        height: 150px;
        /*background: #225555;*/
        border: 1px solid transparent;
    }

    /*头像区域*/
    .person-advator{
        float: left;
        width: 150px;
        height: 150px;
        /*background: url("../../../assets/mm.jpg");*/
        border-radius: 50%;
        margin-top: 15px;
        overflow: hidden;
    }
    /*通用字体*/
    .info_font_common{
        color: #ffffff;
        font-size: 12px;
    }
    /*个人信息*/
    .person-info{
        float: left;
        width: 290px;
        height: 150px;
        /*background: red;*/
        margin-top: 15px;
        margin-left: 10px;
    }

    /*浏览记录*/
    .common-ssr-style{
        position: relative;
        float: left;
        width: 120px;
        height: 130px;
        margin-top: 10px;
        margin-left: 10px;
        background: rgba(255,255,255,0.5);
        align-content: center;
        color: #fff;
    }
    /*浏览量*/
    .common-ssr-style .look-number{
        position: absolute;
        top: 20px;
        left: 55px;
    }

    .common-ssr-style .my-common-info{
        position: absolute;
        top: 45px;
        left: 25px;
    }

    .top-common-div{
        margin-left: 450px;
    }

    .person-center-content-area{
        margin-top: 10px;
    }


    .avatar {
        width: 150px;
        height: 150px;
        border-radius: 50%;
        display: block;
    }

    /*-----------------------------------------------------------------------------*/

    .person-center-content-area{

    }
</style>
